<template>
	<section class="wrapper" @keyup.enter="doLogin">
		<el-form label-position="top" :inline="true" v-model="filter" class="demo-form-inline">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="品牌名称:">
                        <el-input placeholder="品牌名称" v-model="filter.brandName" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="被投诉方名称">
                        <el-input placeholder="品牌名称" v-model="filter.entityOwnerName" size="small"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="知识产权类型:">
                        <el-select v-model="filter.intellectualStr" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="商标权" value="商标权"></el-option>
                            <el-option label="专利权" value="专利权"></el-option>
                            <el-option label="著作权" value="著作权"></el-option>
                            <el-option label="其他" value="其他"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                
                <el-col :span="4">
                    <el-form-item label="处理状态:">
                        <el-select v-model="filter.statusStr" size="small">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已提交" value="已提交"></el-option>
                            <el-option label="审核不通过" value="审核不通过"></el-option>
                            <el-option label="卖家申诉成立" value="卖家申诉成立"></el-option>
                            <el-option label="卖家已申诉-待投诉方响应" value="卖家已申诉-待投诉方响应"></el-option>
                            <el-option label="审核通过-卖家申诉中" value="审核通过-卖家申诉中"></el-option>
                            <el-option label="链接已删除" value="链接已删除"></el-option>
                            <el-option label="卖家申诉不成立" value="卖家申诉不成立"></el-option>
                            <el-option label="投诉方已撤诉" value="投诉方已撤诉"></el-option>
                            <el-option label="小二已介入" value="小二已介入"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
              	<el-col :span="4">
                    <el-form-item label="处理时间:" width="100">
                        <el-date-picker
                                size="small"
                                style="width: 100%;"
                                :picker-options='pickerOptions1'
                                v-model="GmtCreate"
                                type="datetimerange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="屏蔽状态:">
                        <el-select v-model="filter.appealFlag" size="small">
                            <el-option label="全部" value=""></el-option> 
                            <el-option label="正常" value="1"></el-option>
                            <el-option label="屏蔽" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col> 
            </el-row>

            <el-row>
                <el-col :span="24" class="action_col">
                    <el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件
                        </el-button>
                        <el-button size="small" type="primary" @click="getlists" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
            	<el-col :span='24' class="hide_and_show">
            		<el-form-item class="action_button_group_open">
                        <el-button size="small"  @click="shieldBox" :disabled="pingbi"></i>屏蔽
                        </el-button>
                        <el-button size="small" @click="noShield" :disabled="cancelpingbi">撤销屏蔽</el-button>
                    </el-form-item>
            	</el-col>
            </el-row>
            <el-row>
            	<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
				    <el-table-column type="selection" width="55">
				    </el-table-column>
				    <el-table-column label="投诉信息" min-width="270" align="center">
  				      <template scope="scope">
  				      	<br />
  				      	<div>{{ scope.row.entityOwnerName }}<span>　({{scope.row.entityOwnerId}})</span></div>	
  				      	<a :href="scope.row.listhrefs" target="_blank">{{scope.row.listhrefs}}</a>
                  <!-- <nuxt-link  :to="scope.row.href">    
                      {{ scope.row.listhrefs}}
                    </nuxt-link> -->

  				      	<div>（{{scope.row.statusStr}}）</div>
  				        <div>投诉单号:{{scope.row.batchId}}</div>
  				        <div>处理时间：{{scope.row.appealDate}}</div>
  				        <br />
  				      </template>
				    </el-table-column>
				    <el-table-column prop="iprName" label="知识产权/申诉信息" min-width="170" align="center">
				    </el-table-column>	
				    <el-table-column prop="brandName" label="品牌名称" min-width="100"align="center">
				    </el-table-column>
				    <el-table-column prop="intellectualStr" label="知识产权类型" min-width="150"align="center">
				    </el-table-column>
				    <el-table-column prop="saleMemberName" label="销售" min-width="90"align="center">
				    </el-table-column>
				    <el-table-column prop="dockMemberName" label="对接员" min-width="90"align="center">
				    </el-table-column>
				    <el-table-column prop="statusStr" label="处理状态/备注" min-width="140"align="center">
				    </el-table-column>
				    <el-table-column prop="appealFlagName" label="屏蔽状态" min-width="100"align="center">
				    </el-table-column>	
				</el-table>
            	
            </el-row> 
            <el-row class="paging">
	            <el-pagination
	                    @current-change="handleCurrentChange"
	                    @size-change="handleSizeChange"
	                    :current-page="pagingData.pageNum"
	                    :page-sizes="pagingData.pageSizes"
	                    :page-size="10"
	                    layout="total, sizes, prev, pager, next, jumper"
	                    :total="pagingData.total">
	            </el-pagination> 
	        </el-row>
            
        </el-form>
	</section>
</template>

<script>
	import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Row, Col, Form, FormItem, Button ,Select,Option,DatePicker,Table,Pagination,TableColumn,Input,Tabs,TabPane,Message,MessageBox} from 'element-ui';
	import { getDate, getArraySub, getLevelName, validTel, setToken, getCookie } from '../../utils/auth';
    
	Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Input);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(Table);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(TableColumn);
    Vue.use(Pagination);
	
	
	Vue.prototype.$message = Message;
    Vue.prototype.$confirm = MessageBox.confirm;
    export default {
      head(){
          return {
              title: "审核中",
              meta: [
                  { hid: 'inaudit-complaint', name: 'inaudit-complaint', content: 'inaudit-complaint'}
              ]
          }
      },
      data() {
      	return {
      		tabName: '审核中',
      		filter:{
      			brandName:'',//品牌名称
      			entityOwnerName:'',//被投诉方名称
      			intellectualStr:'',//知识产权类型
      			statusStr:'',//处理状态
      			appealFlag:'',//投诉状态
      			pageSize:10,
      			pageNum: 1,//页码
      			appealId:'',
				appealDateBegin: '', //创建时间开始
				appealDateEnd: '', //创建时间结束
      		},
            pickerOptions1: { //处理时间只能选择今天之前的
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
      		tableData: [],
	        pagingData: {
	            pageSizes: [10, 20, 50],	// 每页可选条数列表,
	            total: 0,
	            pageNum: 1
            },
            multipleSelection:[],//checkbox选中客户列表数据
			GmtCreate: [], //创建时间
            mapAppealFlags:[],//chaeckbox选中列表数据的屏蔽状态
            brr:[],
            pingbi:false,//屏蔽按钮的禁用与否
            cancelpingbi:false,//撤销屏蔽按钮的禁用与否
      	}
      },
      computed: {
          ...mapGetters({
              'pageTabsList': 'getPageTabsList'
          })
      },
      methods:{
      	
      	//点击enter实现搜索
			doLogin(event) {
				var e = event || window.event || arguments.callee.caller.arguments[0];
				if(e && e.keyCode == 13) {
					this.getlists();
				}
			},
      	
		  empty(){
		  		let pageSize = this.filter.pageSize;
				let pageNum = this.filter.pageNum;
    		this.filter = {
    			brandName:'',//品牌名称
      			entityOwnerName:'',//被投诉方名称
      			intellectualStr:'',//知识产权类型
      			statusStr:'',//处理状态
      			appealFlag:'',//投诉状态
      			pageSize:pageSize,
      			pageNum: pageNum,//页码
      			appealId:'',
				appealDateBegin: '', //创建时间开始
				appealDateEnd: '', //创建时间结束
    		},
			this.GmtCreate = []; //创建时间
			this.geturl();
    	},
      	geturl() {
	    	let url = location.search; 
	    	if (url.indexOf("?") != -1) {
			        let str = url.substr(1);
			        let strs = str.split("&");
			        let ids = strs[0].substr(3);
			        this.filter.appealId = parseInt(ids);
			        let titname = strs[1].substr(8)
			        this.tabName = titname;
			    }
	    },
      	getlists(){
			if(this.GmtCreate && this.GmtCreate[0]) {
				this.filter.appealDateBegin = this.GmtCreate[0] ? getDate(this.GmtCreate[0], true) : '';
				this.filter.appealDateEnd = this.GmtCreate[1] ? getDate(this.GmtCreate[1], true) : '';
			} else {
				this.filter.appealDateBegin = '';
				this.filter.appealDateEnd = '';
			}
      		var Id=this.filter.appealId;
      		this.$store.dispatch('getAppealDetailInfoList',
      			this.filter
      		)
			.then((response) => {
				if(!response) {
					return
				}
				let result = response.data;
				if(result.successed = true ) {
					this.tableData = result.data.list;
					for (let i=0;i<this.tableData.length;i++){
						this.tableData[i].serialnumber = this.tableData[i].id;
						this.tableData[i].listhrefs = this.tableData[i].entityKeyUrl;
					}
					this.pagingData.total = result.data.total;
					this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
				} else if(result.data = null) {
					this.pagingData.total = 0;
					this.pagingData.pageNum = 0;	
				} else {
					this.customerList = [];
					this.pagingData.total = 0;
					this.pagingData.pageNum = 0;
				}
			})
      	},
      	
      	//表格的全选和单选
      	toggleSelection(rows) {
	        if (rows) {
	          rows.forEach(row => {
	            this.$refs.multipleTable.toggleRowSelection(row);
	          });
	        } else {
	          this.$refs.multipleTable.clearSelection();
	        }
	    },
	    handleSelectionChange(val) {
	    	console.log(val);
	       let ids = [];
            let appealFlag = [];
			for(let i = 0; i < val.length; i++) {
				ids.push(val[i].id);
                appealFlag.push(val[i].appealFlag);
			}
			this.multipleSelection = ids;
            this.mapAppealFlags = appealFlag; 
            var arr = this.mapAppealFlags;
            this.brr = Array.from(new Set(arr));
            if(this.brr.length == 1){
                for(let i=0;i<this.brr.length;i++) {
                    if(this.brr[i] == 1){
                        this.cancelpingbi = true;
                        this.pingbi = false;
                    }else{
                        this.cancelpingbi = false;
                        this.pingbi = true;
                    }
                }
            }else if(arr.length == 0){
                this.cancelpingbi = false;
                this.pingbi  = false ;
            } 
	    },
    	
    	//屏蔽
    	shieldBox(){
    		if(this.multipleSelection == '') {
					this.$message.error('请先选择品牌');
					return;
			}else{
                if(this.brr.length !== 1){
                    Message.error({
                        message: '请选择相同投诉状态操作'
                    });
                }else{
                    this.$confirm('确定屏蔽所选投诉吗?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                        var arrids=this.multipleSelection;
                        var canshu = arrids.join(",");
                        this.$store.dispatch('shieldAppealDetailInfo',{
                                detailIds:canshu,type:2
                            })
                        .then((response) => {
                            let result = response.data;
                            if(result.successed == true) {
                                this.getlists({
                                    pageNum: 1,
                                    pageSize: 10
                                }); 
                                Message.success({
                                    message: '屏蔽成功'
                                });
                            }else {
                                Message.error({
                                    message: '屏蔽~失败'
                                })
                            }
                        })
                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消屏蔽'
                      });          
                    });
                }
    	    } 
    	},
    	//撤销屏蔽
    	noShield(){
    		if(this.multipleSelection == '') {
					this.$message.error('请先选择品牌');
					return;
			}else {
                 if(this.brr.length !== 1){
                  Message.error({
                              message: '请选择相同投诉状态操作'
                          });
                }else{
                    this.$confirm('确定撤销屏蔽吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                      var arrids=this.multipleSelection;
                        var canshu = arrids.join(",");
                        this.$store.dispatch('shieldAppealDetailInfo',{
                            detailIds:canshu,type:1
                        })
                        .then((response) => {
                            let result = response.data;
                            if(result.successed == true) {
                                this.getlists({
                                    pageNum: 1,
                                    pageSize: 10
                                });
                                Message.success({
                                    message: '撤销屏蔽成功'
                                });
                            }else {
                                Message.error({
                                    message: '撤销屏蔽~失败'
                                })
                            }
                        })
                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消屏蔽'
                      });          
                    });
                }
            }
    		
    	},
    	handleCurrentChange(val) {
            this.filter.pageNum = val;
			this.getlists(this.filter);
        },
        handleSizeChange(val) {
            this.filter.pageSize = val;
			this.filter.pageNum = 1;
			this.getlists(this.filter);
        },
      },
      created () {
          //pageTab
          if(process.BROWSER_BUILD) {
              if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                  let arr = this.pageTabsList;
                  arr[arr.length-1].name = this.tabName;
                  this.$store.commit('PAGETABSLIST',{data:arr})
              }
          }
      },
      mounted () {
//    	var nums = this.$route.query.numbers;
//    	this.tabName = nums;
      	this.geturl(); 
      	this.getlists(); 
      },
    }
	
</script>

<style lang="scss">
	.wrapper{
		a, a:hover, a:focus, a:visited{
	    	-webkit-text-decoration-line: underline;
	  		text-decoration-line: underline; 
		} 
		.paging{
			margin-top: 20px;
		}

	} 
</style>